<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d—transform</title>
</head>
<style>
    <!--
    /*2d-skew(x,y) //倾斜度数
    	eg:)例：transform:skew(20deg,30deg); 水平方向倾斜20deg，垂直方向倾斜30deg
        2d-rotate(deg) 旋转
        2d-scale(x,y) 放大倍数
        2d-translate(x,y) 沿着方向轴移动（位移）
        */
    -->
    .box{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background: url(./img/pxh.jpg) center center/100% 100%;
        -webkit-transition:  4s;
        -moz-transition:  4s;
        -ms-transition:  4s;
        -o-transition:  4s;
        /*transition:  4s;*/
        -webkit-transition:  all 2s ease-in-out;
        /*transform: skew(20deg,40deg) scale(1.5) translate(20px,20px);*/
        /*transform:rotate(20deg);//2d旋转*/
    }
    .box:hover{
        -webkit-transform:rotate(180deg) scale(1.5,0) translate(100px,0) skew(180deg,0);
    }

</style>
<body>
<div id="box" class="box"></div>
</body>
</html>